<template>
  <uni-popup ref="popup" type="bottom">
    <view class="bgWite">
      <view class="title flex flex-align flex-center">赠品详情</view>
      <view class="colse" @click="close">
        <uni-icons type="closeempty" size="20"></uni-icons>
      </view>
      <view style="margin: 30rpx;">
        <view class="gifttitle">
          <text v-for="(item,index) in dataInfo" :key="index">{{ item.name }}<text class="span"> x{{item.num}}</text><text v-if="index<(dataInfo.length-1)">,</text></text>
        </view>
        <!-- 轮播 -->
         <view class="lunbo">
          <swiper next-margin="40rpx" >
            <swiper-item v-for="(item, index) in dataInfo" :key="index">
              <view class="swiper">
                <view class="couponone flex" v-if="Number(item.type)==1">
                  <view class="coupon-item-left">
                    <view class="coupon-item-left-title"><text>￥</text>{{ item.coupon_amount }}</view>
                      <view class="coupon-item-left-subtitle">满{{ item.limit_amount }}元可用</view>
                  </view>
                  <view class="coupon-item-right flex flex-direction flex-bt">
                    <view class="coupon-item-right-top">{{ item.name }}</view>
                    <view class="coupon-item-right-center">有效期{{ item.expire_date }} 天</view>
                    <view class="coupon-item-right-bottom one-omit">{{ item.desc }}</view>
                  </view>
                </view>
                <view class="coupontwo" v-if="Number(item.type)==2">
                  <view class="bg">
                    <view class="two-title flex flex-align flex-bt">
                      <view class="two-title-left">商品兑换券</view>
                      <view class="two-title-right">有效期{{ item.expire_date }} 天</view>
                    </view>
                    <view class="two-center">
                      <view class="two-center-title">{{ item.name }} *{{ item.num }}</view>
                      <view class="two-center-bottom one-omit">{{ item.desc }}</view>
                    </view>
                  </view>
                </view>
              </view>
            </swiper-item>
          </swiper>
         </view>
        <!-- 规则 -->
        <view class="rule">
          <view class="ruleTitle">使用规则</view>
          <view class="ruleContent">
            <view class="ruleContentItem">
              <view class="ruleContentItemContent">1、该商品购买1件，即可赠送您{{dataInfo[0].type==2?'兑换券':'优惠券'}}</view>
            </view>
            <view class="ruleContentItem">
              <view class="ruleContentItemContent">2、优惠券到账时间为确认收货后到账</view>
            </view>
            <view class="ruleContentItem">
              <view class="ruleContentItemContent">3、若优惠券已发放，订单退款，则已发放的优惠券会被收回，若无特殊情况，请不要退货哦</view>
            </view>
          </view>
        </view>

      </view>
    </view>
  </uni-popup>
</template>



<script setup lang="ts">
import { onMounted, ref } from 'vue'

defineProps({
  show: {
    type: Boolean,
    default: true
  },
  dataInfo: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['submit', 'update:show'])
onMounted(() => {})
const popup = ref<any>(null)
async function open() {
  popup.value?.open('bottom')
  updateShow(true)
}
function close() {
  popup.value?.close()
  updateShow(false)
}
function subMite(value: any) {
  emit('submit', value)
  close()
}
function updateShow(value: boolean) {
  emit('update:show', value)
}
defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.bgWite{background: #F5F6F7;max-height: 1000rpx;border-radius: 30rpx 30rpx 0 0;position: relative;
  padding-bottom: 30rpx;
  .title{font-size: 32rpx;height:90rpx;}
  .colse{position: absolute;right: 30rpx;top:30rpx;}
  
}
.gifttitle{
  .span{color: #FE7431;}
}
.swiper{box-sizing: border-box;margin-top: 30rpx;padding-right: 30rpx;
    
    .couponone{background: #fff;border-radius: 16rpx;margin-bottom:20rpx;position: relative;overflow: hidden;
      box-sizing: border-box;
      .coupon-item-left{box-sizing: border-box;
        background: url('@/static/user/user25.png') no-repeat;background-size: 100% 100%;width: 190rpx;height: 180rpx;color: #fff;text-align: center;
        .coupon-item-left-title{font-size: 60rpx;font-weight: bold;margin-top: 30rpx;
          text{font-size: 24rpx};
        }
        .coupon-item-left-subtitle{font-size: 22rpx;}
      }
     .coupon-item-right{padding:20rpx;width: 500rpx;box-sizing: border-box;
       .coupon-item-right-top{font-size: 30rpx;font-weight: bold;}
      .coupon-item-right-center{font-size: 22rpx;color: #969799;margin-top: 10rpx;}
     .coupon-item-right-bottom{font-size: 22rpx;color: #969799;margin-top: 10rpx;}
     }
    }
  .coupontwo{background: #FE7431;border-radius: 16rpx;margin-bottom:20rpx;position: relative;
    .bg{background: #fff;border-radius: 16rpx;width: 620rpx;
      box-sizing: border-box;
      .two-title{padding: 20rpx;box-sizing: border-box;margin-bottom:30rpx;border-bottom: 1px solid #F8F3F0;
        .two-title-left{font-size: 26rpx;font-weight: bold;color: #323233;}
        .two-title-right{font-size: 22rpx;color: #999;}
      }
      .two-center{padding: 0 20rpx 20rpx 20rpx;box-sizing: border-box;
        .two-center-title{font-size: 30rpx;font-weight: bold;
         text{font-size: 32rpx;color: #FE7431;}
        }
        .two-center-bottom{font-size: 22rpx;color: #999;margin-top: 10rpx;width: 560rpx;margin-top: 10rpx;}
      }
    }
  }
}
.rule{
  .ruleTitle{font-size: 30rpx;font-weight: bold;}
  .ruleContent{margin-top: 20rpx;background: #fff;padding: 30rpx;border-radius: 16rpx;
    .ruleContentItem{display: flex;flex-direction: row;margin-bottom:6rpx;
     .ruleContentItemContent{font-size: 24rpx;color: #646566}
   }
 }
}
</style>
